<template>
  <u-modal
    v-model="show"
    :show-title="false"
    :show-cancel-button="true"
    confirm-text="发布"
    :confirm-color="globPrimaryColor"
    :negative-top="negativeTop"
    :confirm-style="{ 'border-left': '1px solid #e4e7ed' }"
    @confirm="confirm"
  >
    <view class="note-textarea">
      <u-input
        v-model="content"
        type="textarea"
        :border="true"
        :maxlength="200"
        placeholder="输入笔记内容"
        :height="190"
        :show-confirmbar="false"
        @focus="onInputFocus"
        @blur="onInputBlur"
      />
    </view>
    <view class="note-checkbox">
      <u-checkbox v-model="status" :activeColor="globPrimaryColor">公开</u-checkbox>
    </view>
  </u-modal>
</template>
<script>
import { mapState, mapGetters } from 'vuex'
export default {
  props: {
    detailsInfo: {
      type: Object,
      default() {
        return {}
      },
    },
  },
  data() {
    return {
      show: false,
      placeholder: '发布笔记',
      content: '',
      status: false,
      modifyId: 0,
      negativeTop: '0px',
    }
  },
  computed: {
    ...mapState({
      getCurrentPlayItem: (state) => state.course.currentPlayItem,
    }),
    ...mapGetters({
      globPrimaryColor: 'designSetting/getGlobThemeColor',
    }),
  },
  methods: {
    confirm() {
      this.$u.debounce(() => {
        if (this.modifyId) {
          this.onModifyNote()
        } else {
          this.onAddNotes()
        }
      })
    },
    onAddNotes() {
      if (this.$u.trim(this.content).length == 0) {
        this.$u.toast('内容不能为空')
        return
      }
      // 新添加笔记
      this.$edu.api
        .postCourseNote({
          section_id: this.getCurrentPlayItem.id,
          course_id: this.getCurrentPlayItem.course_id,
          course_type: this.detailsInfo.course_type,
          open_status: this.status ? 1 : 0,
          content: this.content,
        })
        .then((res) => {
          this.$u.toast(res.msg)
          this.handleNoteSucc()
        })
        .catch((res) => {
          this.$u.toast(res.msg)
        })
    },
    // 修改笔记
    onModifyNote() {
      if (this.$u.trim(this.content).length == 0) {
        this.$u.toast('内容不能为空')
        return
      }
      //直接修改当前笔记
      this.$edu.api
        .putCourseNote(this.modifyId, {
          content: this.content,
          open_status: this.status ? 1 : 0,
        })
        .then((res) => {
          this.$u.toast(res.msg)
          this.handleNoteSucc()
        })
        .catch((res) => {
          this.$u.toast(res.msg)
        })
    },
    handleNoteSucc(msg) {
      uni.$emit('courseTabUpdate')
      setTimeout(() => {
        this.show = false
        this.content = ''
        this.modifyId = 0
        this.status = false
      }, 500)
    },
    onInputFocus() {
      uni.onKeyboardHeightChange((res) => {
        this.negativeTop = res.height + 'px'
      })
    },
    onInputBlur() {
      this.negativeTop = '0px'
    },
  },
  beforeDestroy() {
    uni.offKeyboardHeightChange((res) => {
      console.log(res)
    })
  },
}
</script>
<style lang="scss" scoped>
.note-textarea {
  padding: 42rpx 42rpx 0;
  position: relative;
  .inputLength {
    font-size: 22rpx;
    font-weight: 400;
    color: #b7bac1;
    position: absolute;
    right: 66rpx;
    bottom: 16rpx;
  }
}
.note-checkbox {
  padding: 24rpx 42rpx;
}
</style>
